<template>
	<view>

		<!-- 轮播图 -->
		<view class="swiper-view">
			<swiper class="swiper" indicator-dots="true" autoplay="true" circular="true" indicator-active-color="#ffffff">
				<swiper-item v-for="swiper in swiperList" :key="swiper.id" @tap="toSwiper(swiper)">
					<image mode="aspectFill" :src="root_url+swiper.img_url"></image>
				</swiper-item>
			</swiper>
			<!-- <view class="keep-out"></view> -->
		</view>
		<!-- 分类轮播 -->
		<view class="category">
			<view class="box">
				<swiper	class="swiper" duration="300" :style="{ height: categoryHeight }" @change="categoryChange">
					<swiper-item v-for="(page, pageindex) in categoryList" :key="pageindex" >
						<view class="category-list">
							<view class="icon" v-for="category in page" :key="category.cat_id" @tap="toCategory(category)">
								<image mode="widthFix" :src="category.img" @load="categoryImgLoad"></image>
								<view>{{ category.title }}</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="dots">
					<view v-for="(page, pageindex) in categoryList" :key="pageindex" :class="{ active: pageindex == currentPageindex }"></view>
				</view>
			</view>
		</view>
		
		
		<!-- 商家 -->
		<view class="shop">
			<view class="sort-menu">
				<view class="item" :class="currentMenu == 1 ? 'on' : ''" @tap="changeMenu(1)">综合排序</view>
				<view class="item" :class="currentMenu == 2 ? 'on' : ''" @tap="changeMenu(2)">销量最高</view>
				<view class="item" :class="currentMenu == 3 ? 'on' : ''" @tap="changeMenu(3)">评分最高</view>
			</view>
			
			<view class="shop-list">
				<view class="item" v-for="(item, index) in list" :key="item.id" @tap="toShopDetal(item.id)">
					<view class="shop-left">
						<image :src="root_url + item.icon"></image>
						<view class="down" v-if="item.status !=1">休息中</view>
					</view>
					
					<view class="shop-right">
						<view class="title">{{item.name}}</view>
						
						<view class="score-sale">
							<view class="score"><text class="iconfont icon-pingfen"></text>{{item.sorce}}</view>
							<view class="sale">月售:{{item.total_orders}}单</view>
						</view>
						
						<view class="min-send">
							<view class="min-fee">起价:<text>{{item.min_fee}}</text></view>
							<view class="send-fee">配送:<text>{{item.send_fee}}</text></view>
						</view>
						
						<view class="simple-introduce"><text class="iconfont icon-shangjiaruzhu"></text>{{item.simple_desc}}</view>
						
						<view class="address"><text class="iconfont icon-dizhi1"></text>{{item.address}}</view>
					</view>
				</view>
				
					
				
			</view>
		</view>
		
	</view>
</template>
<script>

import tools from '@/static/utils/tools.js'
var jweixin = require('@/static/js/jweixin.js')  

export default {
	data() {
		return {
			currentMenu:1,
			root_url:this.root_url,
			list: [],
			cid:0,
			page:1,
			pageSize:8,
			allPages:0,
			//轮播
			swiperList:[],
			//分类
			categoryList: [
				[//第一页
					{ cat_id: 0, img: '../../static/HM-shophome/category-img/0.png', title: '吹风机' },
					{ cat_id: 1, img: '../../static/HM-shophome/category-img/1.png', title: '发箍' },
					{ cat_id: 2, img: '../../static/HM-shophome/category-img/2.png', title: '肥皂' },
					{ cat_id: 3, img: '../../static/HM-shophome/category-img/3.png', title: '粉饼' },
					{ cat_id: 4, img: '../../static/HM-shophome/category-img/4.png', title: '化妆镜' },
					{ cat_id: 5, img: '../../static/HM-shophome/category-img/5.png', title: '睫毛膏' },
					{ cat_id: 6, img: '../../static/HM-shophome/category-img/6.png', title: '睫毛夹' },
					{ cat_id: 7, img: '../../static/HM-shophome/category-img/7.png', title: '精华' },
					{ cat_id: 8, img: '../../static/HM-shophome/category-img/8.png', title: '口红' },
					{ cat_id: 9, img: '../../static/HM-shophome/category-img/9.png', title: '面膜' }
				],
				[//第二页
					{ cat_id: 10, img: '../../static/HM-shophome/category-img/10.png', title: '面霜' },
					{ cat_id: 11, img: '../../static/HM-shophome/category-img/11.png', title: '乳液' },
					{ cat_id: 12, img: '../../static/HM-shophome/category-img/12.png', title: '梳子' },
					{ cat_id: 13, img: '../../static/HM-shophome/category-img/13.png', title: '刷子' },
					{ cat_id: 14, img: '../../static/HM-shophome/category-img/14.png', title: '洗脸仪' },
					{ cat_id: 15, img: '../../static/HM-shophome/category-img/15.png', title: '洗面奶' },
					{ cat_id: 16, img: '../../static/HM-shophome/category-img/16.png', title: '香水' }
				]
			],
			
			
			categoryHeight: '150px',
			currentPageindex: 0,
			loadingText:"正在加载..."
			
		};
	},
	
	
	onReady() {
		
	}, 
	onPageScroll(e){
		//兼容iOS端下拉时顶部漂移
		if(e.scrollTop>=0){
			this.headerPosition = "fixed";
		}else{
			this.headerPosition = "absolute";
		}
	},
	//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
	onPullDownRefresh() {
        setTimeout(function () {
            uni.stopPullDownRefresh();
        }, 1000);
    },
	//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
	onReachBottom(){
		
		
		if ( this.allPages >= this.page) {
			this.render();
		}else{
			return false;
			this.loadingText="到底了";
		}
	},
	onLoad() {
		
		tools.httpClient('get','index.php?c=shop&a=getJssdk',{},(res)=>{
			var configInfo = res.data;
			 jweixin.config({
				debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				appId: configInfo.appId, // 必填，公众号的唯一标识
				timestamp: configInfo.timestamp, // 必填，生成签名的时间戳
				nonceStr: configInfo.nonceStr, // 必填，生成签名的随机串
				signature: configInfo.signature,// 必填，签名
				jsApiList: ['getLocation'] // 必填，需要使用的JS接口列表
			 })
			 
			jweixin.ready(function(){
				jweixin.getLocation({
					type: 'wgs84', 
					success:function(res){
						console.log(res,11111111222)
					}
				})	
			})
			
					
		})
		
		  
		console.log(this.root_url,2)
		var that = this;
		//banner 和 分类
		tools.httpClient('get','index.php?c=shop&a=slideWithCategory',{},(res)=>{
			that.swiperList = res.data
			console.log(res,11)
		})
		
		this.render();
		
	},
	methods: {
		
		//切换选择
		changeMenu(e){
			this.currentMenu = e
		},
		
		//轮播图跳转
		toSwiper(e){
			uni.showToast({title: e.src});
		},
		//分类跳转
		toCategory(e){
			uni.showToast({title: e.title});
		},
		
		//更新分类指示器
		categoryChange(event) {
			this.currentPageindex = event.detail.current;
		},
		
		//分类图片加载完毕
		categoryImgLoad(e){
			this.categoryImg = this.categoryImg?this.categoryImg+1:1;
			//完成加载11个分类图片开始计算分类高度，若分类图片不足10个则修改此处的10。
			if(this.categoryImg==10){
				this.getCategoryHeight();
			}
		},
		//更新分类高度
		getCategoryHeight() {
			let view = uni.createSelectorQuery().select('.category-list');
			view.fields(
				{
					size: true
				},
				data => {
					this.categoryHeight = data.height + 'px';
				}
			).exec();
		},
		
		toShopDetal(shop_id){
			uni.navigateTo({
				url:'../shop/shop?shop_id='+shop_id
			})
		},
		
		/**
		* 分页加载商品数据
		*/
		render(){
			let that = this;
			uni.showLoading({title: '加载中'});
			uni.request({
				url: that.root_url + 'index.php?c=shop&a=pagingShop',
				data: {
					pageIndex: that.page,
					pageSize: that.pageSize,
				},
				method: 'GET',
				success: function (res) {	
					console.log(res,33)
					var dataList = res.data.data.dataList;
					var list = that.list;
					that.allPages = res.data.data.pageInfo.all_pages;
					for (var i = 0; i < dataList.length; i++) {
						list.push(dataList[i]);
					}
					that.list = list;
					that.page = that.page+1;
					console.log(that.list,1222)
				},
				complete: function () {
					uni.hideLoading()
				}
			})
	    },
			
	}
};
</script>
<style>


page {
  background-color: #f2f2f2;
}

.swiper-view .swiper {
  width: 100%;
  height: 280upx;
  background: #fff;
}
.swiper-view .swiper image {
  width: 100%;
  height: 280upx;
}
.swiper-view .keep-out {
  width: 100%;
  height: 30upx;
  border-radius: 100% 100% 0 0;
  background-color: #ff570a;
  margin-top: -15upx;
  position: absolute;
}

.category {
  padding: 2.5vw 2.5vw;
}
.category .box {
  width: 100%;
  border-radius: 20upx;
  background-color: #ffffff;
}
.category .box .dots {
  display: flex;
  justify-content: center;
  height: 15upx;
  width: 100%;
}
.category .box .dots view {
  width: 30upx;
  height: 5upx;
  background-color: rgba(0, 0, 0, 0.2);
}
.category .box .dots view.active {
  background-color: #ff570a;
}
.category .box .swiper {
  width: 100%;
  padding: 10upx 0;
}
.category .box .swiper .uni-swiper-dot {
  width: 20upx;
}
.category .box .swiper .category-list {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  padding: 10upx 0;
  flex-flow: wrap;
}
.category .box .swiper .category-list .icon {
  width: 20%;
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  font-size: 22upx;
  color: #666;
}
.category .box .swiper .category-list .icon image {
  width: 70%;
  height: 13.3vw;
}
.category .box .swiper .category-list .icon view {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* 商家 */
.shop{
	
}
.shop .sort-menu{
	display: flex;
}
.shop .sort-menu .item{
	text-align: center;
	width: 33.33%;
	height: 60upx;
	line-height: 60upx;
}
.shop .sort-menu .on{
	color: #ff5733;
}

.shop .shop-list{
	padding: 2.5vw 2.5vw;
}

.shop .shop-list .item{
	width: 100%;
	border-radius: 20upx;
	background-color: #ffffff;
	display: flex;
	padding: 16upx 20upx;
}
.shop .shop-list .item +.item{
	margin-top: 20rpx;
}
.shop .shop-list .item .shop-left{
	position: relative;
}
.shop .shop-list .item .shop-left image{
	width: 220upx;
	height: 220upx;
}
.shop .shop-list .item .shop-left .down{
	position: absolute;
	background: #d5d5d5;
	color: #fff;
	font-size: 24upx;
	text-align: center;
	width: 220upx;
	height: 50upx;
	line-height: 50upx;
	top: 170upx;
}
.shop .shop-list .item .shop-right{
	padding-left: 20upx;
	flex: 1;
}
.shop .shop-list .item .shop-right .title{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
}

.shop .shop-list .item .shop-right .score-sale{
	display: flex;
	padding-top: 10upx;
	font-size: 24upx;
}
.shop .shop-list .item .shop-right .score-sale .score{
	color: #ff5733;
}
.shop .shop-list .item .shop-right .score-sale .sale{
	padding-left: 16upx;
}

.shop .shop-list .item .shop-right .min-send{
	display: flex;
	padding-top: 10upx;
	font-size: 24upx;
}
.shop .shop-list .item .shop-right .min-send .min-fee text{
	color: #ff5733;
}
.shop .shop-list .item .shop-right .min-send .send-fee{
	padding-left: 16upx;
}
.shop .shop-list .item .shop-right .min-send .send-fee text{
	color: #ff5733;
}

.shop .shop-list .item .shop-right .simple-introduce{
	padding-top: 10upx;
	font-size: 24upx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
}
.shop .shop-list .item .shop-right .simple-introduce text{
	display: inline-block;
	padding-right: 10rpx;
}
.shop .shop-list .item .shop-right .address{
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   overflow: hidden;
   padding-top: 10upx;
   font-size: 24upx;
}
.shop .shop-list .item .shop-right .address text{
	display: inline-block;
	padding-right: 10rpx;
}
</style>
